<template>
  <div class="user-info">
    <van-row
        type="flex" justify="center" align="middle" class="header">
    </van-row>
    <van-cell-group>
      <van-nav-bar
          title="个人主页"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <van-cell-group>
          <van-cell
              v-if="userProfile"
              :title="userProfile.username"
              :label="userProfile.description || '暂无个人描述'"
          >
            <template #right-icon v-if="userProfile.vipStatus">
              <van-tag type="primary">VIP</van-tag>
            </template>
            <template #icon>
              <img v-if="userProfile.imageUrl" :src="userProfile.imageUrl" alt="User Avatar" class="user-avatar"/>
            </template>
          </van-cell>
        </van-cell-group>
      <van-tabs v-model:active="activeTab">
        <van-tab title="动态">
            <div class="scroll-container">
              <van-list v-model:loading="loading"  @load="onLoad" :finished-text="finishedText"
                        :error-text="errorText">
                <div class="item" v-for="(item, index) in list1" :key="index">
                  <div class="item-header">
                    <div class="item-header-left">
                      <van-image :src="item.avatar" round width="40" height="40"/>
                      <span class="item-header-name">{{ item.userId }}</span>
                      <span class="item-header-time">{{ item.createTime }}</span>
                    </div>
                    <van-tag type="primary" round size="small" v-if="item.hot">hot</van-tag>
                  </div>
                  <div class="item-content">
                    <p>{{ item.content }}</p>
                    <div class="image-wrapper">
                      <van-image :src="item.contentImg" width="200px" height="100px"/>
                    </div>
                    <div class="item-footer">
                      <van-icon name="like-o" size="16" class="icon"/>
                      <span class="icon-text">{{ item.praises }}</span>
                      <van-icon name="star-o" size="16" class="icon"/>
                      <span class="icon-text">{{ item.review }}</span>
                      <van-icon name="chat-o" size="16" class="icon"/>
                      <span class="icon-text">{{ item.collect }}</span>
                      <van-icon name="share-o" size="16" class="icon"/>
                      <span class="icon-text">{{ item.share }}</span>
                    </div>
                  </div>
                </div>
              </van-list>
            </div>
        </van-tab>
        <van-tab title="加油站">
          <div class="feed-list">
            <div v-for="(item, index) in feedItems" :key="index" class="feed-item">
              <div class="feed-header">
                <img :src="item.imageUrl" alt="Avatar" class="avatar" />
                <div class="user-info">
                  <p class="username">{{ item.username }}</p>
                  <p class="timestamp">{{ item.timestamp }}</p>
                </div>
              </div>
              <p class="content">{{ item.content }}</p>
              <div class="actions">
                <button class="action-like">
                  <i class="like-icon"></i>{{ item.likesCount }}
                </button>
                <button class="action-comment">
                  <i class="comment-icon"></i>{{ item.commentsCount }}
                </button>
              </div>
            </div>
          </div>
        </van-tab>
<!--        <van-tab title="回答">
          444444
        </van-tab>-->
        <van-tab title="文章">
            <van-cell
                v-for="article in articles"
                :key="article.articleId"
                :title="article.title"
                :label="article.content"
                :is-link="true"
                :to="'/articleDetails/' +article.articleId"
            >
              <!--            <template #icon>
                            <van-image :src="user.imageUrl" width="40" height="40" round />
                          </template>-->
              <template #label>
                <div>{{article.views}}阅读</div>
                <div>{{article.commentsCount}}评论</div>
              </template>
            </van-cell>
        </van-tab>
        <van-tab title="求助">
          <div class="scroll-container">
            <van-list v-model:loading="loading" finished-text="没有更多了" @load="onLoad">
              <template #default>
                <div class="post" v-for="(post, postIndex) in list2" :key="postIndex">
                  <div class="post-header">
                    <div class="post-title">{{ post.title }}</div>
                    <div class="post-author">{{ post.userId }} - {{ post.createdAt }}</div>
                  </div>
                  <div class="post-content">
                    <img :src="post.image" alt="" class="post-image"/>
                    <div class="post-description">{{ post.content }}</div>
                  </div>
                  <div class="post-footer">
                    <div class="post-footer-item">
                      <van-icon name="like-o" size="16"/>
                      <span class="post-count">{{ post.goods }}</span>
                    </div>
                    <div class="post-footer-item">
                      <van-icon name="comment-o" size="16"/>
                      <span class="post-count">{{ post.views }}</span>
                    </div>
                    <div class="post-footer-item">
                      <van-icon @click="handleClick" name="comment-circle-o" size="30"/>
                    </div>
                  </div>
                </div>
              </template>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
      </van-list>
    </van-cell-group>
  </div>
  {{userId}}
</template>
<script setup>
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from "vue-router";
import axios from "axios";
import {showToast} from "vant";
const route = useRoute();
const router=useRouter();
const userId = ref(route.params.userId || '');
const onClickLeft = () => {
  router.push("/my");
  // 返回按钮逻辑
};
const finishedText = ref('没有更多了');
const errorText = ref('加载失败，请稍后重试');
const list1 = ref([]);
const list2 = ref([]);
const avatarUrl=ref('https://cdn.pixabay.com/photo/2016/03/04/19/36/background-1236581_1280.jpg')
const feedItems = ref([
  {
    imageUrl: "",
    username: "吴彦祖",
    timestamp: "22小时前",
    content: "这大概是个模型吧。（￣︶￣）",
    likesCount: 207,
    commentsCount: 501
  },
])
const activeTab = ref(0);
const loading = ref(false);
const finished = ref(false);
const userProfile = ref(null);
const followingCount = ref(0);
const followersCount =ref(0)
onMounted(async () => {
  try {
    const response = await axios.get(`http://localhost:9090/user/user/selectUser?userId=${userId.value}`);
    if (response.status === 200 && response.data.code === 0) {
      userProfile.value = response.data.data;
      followingCount.value = userProfile.value.followingCount;
      followersCount.value = userProfile.value.followersCount;
      userId.value = response.data.data.id;
    } else {
      showToast('获取用户信息失败，请稍后重试');
    }
  } catch (error) {
    console.error('获取用户信息时发生错误:', error);
    showToast('网络错误，请检查您的网络连接');
  }
});
const onLoad = () => {
  axios({
    method: 'get', // post  get
    url: 'http://localhost:8081/api/post/findAll'
  }).then(
      (data) => {
        console.log(JSON.stringify(data))
        console.log("获取处理器的数据：" + JSON.stringify(data.data))
        var r = data.data;

        // 加载状态结束
        loading.value = true;
        finished.value = true

        if (r.code == 0) {
          showToast("查询成功");
          feedItems.value = r.data;// 初始化界面
        } else {
          showToast("查询失败");
        }


      })
      .catch(
          function () {
            alert("服务器错误")
          }
      )
};
  axios({
    method: 'get', // post  get
    url: 'http://localhost:9091/study/article/all'
  }).then(
      (data) => {
        console.log(JSON.stringify(data))
        console.log("获取处理器的数据：" + JSON.stringify(data.data))
        var r = data.data;

        // 加载状态结束
        loading.value = false;
        finished.value = true

        if (r.code == 0) {
          showToast("查询成功");
          articles.value = r.data;// 初始化界面
          list2.value = r.data;// 初始化界面
        } else {
          showToast("查询失败");
        }


      })
      .catch(
          function () {
            alert("服务器错误")
          }
      )
axios({
  method: 'get', // post  get
  url: 'http://localhost:9099/circle/selectAll'
}).then(
    (data) => {
      console.log(JSON.stringify(data))
      console.log("获取处理器的数据：" + JSON.stringify(data.data))
      var r = data.data;

      // 加载状态结束
      loading.value = false;
      finished.value = true

      if (r.code == 0) {
        showToast("查询成功");
        list1.value = r.data;// 初始化界面
      } else {
        showToast("查询失败");
      }


    })
    .catch(
        function () {
          alert("服务器错误")
        }
    )
const articles = ref([])

</script>

<style scoped>
.feed-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.feed-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.feed-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 60px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}

.username {
  font-size: 14px;
  font-weight: bold;
}

.timestamp {
  font-size: 12px;
  color: gray;
}

.content {
  margin-left: 10px;
  flex-grow: 1;
}

.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  gap: 5px;
}

.action-like,
.action-comment,

.action-like i,
.action-comment i,
.action-share i {
  font-size: 16px;
}

.action-like span,
.action-comment span,
.action-share span {
  font-size: 12px;
  margin-left: 5px;
}
.header{
  background-image: url("https://cdn.pixabay.com/photo/2016/03/04/19/36/background-1236581_1280.jpg");
  background-size: cover;
  height: 100px; /* 自定义高度 */
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>